<template>
	<view>
		<div class="container">

			<p class="title">注册新用户</p>

			<div class="div">
				<text class="text">手机号 :</text>
				<input placeholder="手机号" type="text" v-model="myNewInfo.phoneNumber">
			</div>

			<div class="div">
				<text class="text">密码 :</text>
				<input placeholder="密码" name="pwd" type="password" data="passwordtype" v-model="myNewInfo.password">

			</div>

			<div class="div">
				<text class="text">确认密码 :</text>
				<input placeholder="密码" name="newpwd" type="password" data="passwordtype"
					v-model="myNewInfo.newPassword">
			</div>

			<div class="div">
				<text class="text">高校 :</text>
				<uni-combox style="width: 70%;" :candidates="candidates" placeholder="请选择所在高校"
					v-model="myNewInfo.university"></uni-combox>
			</div>

			<div class="div">
				<text class="text">昵称 :</text>
				<input placeholder="昵称" type="text" v-model="myNewInfo.nickname">
			</div>

			<div class="div">
				<text class="text">性别 :</text>
				<uni-data-select v-model="myNewInfo.sex" :localdata="range" @change="change"></uni-data-select>
			</div>

			<div class="div">
				<text class="text">绑定QQ邮箱 :</text>
				<input placeholder="QQ邮箱" type="text" v-model="myNewInfo.QQMail">
			</div>

			<div class="div">
				<input placeholder="验证码" type="text" v-model="myNewInfo.myVerificationCode">
				<button v-if="disabled" type="submit" @click="getCode">{{text}}</button>
				<button v-if="!disabled" style="background-color: #7C7881;" type="disabled">{{text}}</button>
			</div>

			<button style="margin: 20px 0; background-color: #00C9A9;" @click="register">注册</button>
		</div>
	</view>
</template>

<script>
	import baseUrl from '../publicData/baseUrl.js'

	export default {
		name: "myRegister",

		data() {
			return {
				disabled: true,
				text: '获取验证码',
				candidates: ['天津中德应用技术大学'], // 高校列表
				myNewInfo: {
					myVerificationCode: '', // 我输入的qq邮箱验证码
					verificationCode: '', //qq邮箱验证码
					phoneNumber: '',
					password: '',
					newPassword: '',
					QQMail: '',
					university: '',
					nickname: '',
					sex: ''
				},
				// 性别列表
				range: [{
						value: "男",
						text: "男"
					},
					{
						value: "女",
						text: "女"
					},
				],
			}
		},

		methods: {
			// 设置性别
			change(e) {
				this.myNewInfo.sex = e
			},

			// 获取验证码的处理函数
			getCode() {
				const that = this
				// 进行发送验证码请求
				
				// qq邮箱正则
				const checkQQMail = /^[1-9][0-9]{4,10}@qq.com$/;
				const checkQQMailMessage = checkQQMail.test(this.myNewInfo.QQMail);


				if (this.myNewInfo.QQMail === '') {
					return uni.showToast({
						title: "请填写QQ邮箱！",
						icon:'none'
					})
				}

				if (!checkQQMailMessage) {
					return uni.showToast({
						title: "请输入正确的QQ邮箱格式！",
						icon:'none'
					})
				}
				that.disabled = false
				uni.request({
					url: baseUrl.host + '/api/sendVerificationCode',
					method: 'POST',
					data: {
						QQMail: this.myNewInfo.QQMail
					},
					success(res) {
						if (res.data.status >= 200 && res.data.status <= 300) {
							// 隐藏获取验证码按钮
							// 进入 60s 倒计时请求冷却
							for (let i = 0; i <= 60; i++) {
								setTimeout(() => {
									that.text = 60 - i + '秒后再获取！'
									if (i === 60) {
										that.text = '获取验证码'
										that.disabled = true
									}
								}, 1000 * i)
							}

							that.myNewInfo.verificationCode = res.data.verificationCode
						}
						uni.showToast({
							title: res.data.message,
							icon: 'none'
						})
					}
				})
			},

			// 进行注册的处理函数
			register() {
				const that = this

				// 进行注册
				uni.request({
					url: baseUrl.host + '/api/registerNewUser',
					method: 'POST',
					data: that.myNewInfo,
					success(res) {
						uni.showToast({
							title: res.data.message,
							icon: 'none'
						})
						if (res.data.status >= 200 && res.data.status < 300) {
							uni.navigateTo({
								url: '../pages/login/myLogin'
							})
						}
					}
				})

			}
		},

	}
</script>

<style scoped>
	.text {
		font-size: 12px;
		color: #666;
		margin-top: 5px;
	}

	.uni-px-5 {
		padding-left: 10px;
		padding-right: 10px;
	}

	.uni-pb-5 {
		padding-bottom: 10px;
	}

	.title {
		margin: 30px 0;
		font-size: 1.5rem;
		line-height: 1.75rem;
		font-weight: 600;
		text-align: center;
		color: #000;
	}

	.container {
		padding: 0 10px;
	}

	.div {
		display: flex;
		max-width: 28rem;
		margin-top: 1rem;
		column-gap: 0.5rem;
	}

	.text {
		font-size: 12px;
		text-align: right;
		width: 80px;
		line-height: 40px;
		display: inline-block;
		height: 40px;
	}

	.div input {
		outline: none;
		line-height: 1.5rem;
		font-size: 0.875rem;
		padding: 0.5rem 0.875rem;
		background-color: rgb(255 255 255 / 0.05);
		border: 1px solid rgba(0, 0, 0, 0.3);
		border-radius: 0.375rem;
		flex: 1 1 auto;
	}

	.div input::placeholder {
		color: rgb(216, 212, 212);
	}

	.div input:focus {
		border: 1px solid rgb(99 102 241);
	}

	.example-body {
		padding: 12px;
		background-color: #FFFFFF;
	}

	.result-box {
		text-align: center;
		padding: 20px 0px;
		font-size: 16px;
	}

	.div button {
		color: #fff;
		font-weight: 600;
		font-size: 0.875rem;
		line-height: 1.25rem;
		padding: 0.625rem 0.875rem;
		background-color: rgb(99 102 241);
		border-radius: 0.375rem;
		border: none;
		outline: none;
	}
</style>